<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :model-value="visible"
      title="生成维护计划"
      width="450px"
      draggable
      destroy-on-close
      align-center
      @close="closeDialog"
      class="maxhDialog"
    >
      <div class="block">
        <span class="mr-3">维护计划日期</span>
        <el-date-picker
          v-model="value1"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          clearable
          type="date"
          placeholder="请选择维护计划日期"
          style="width: 310px; height: 34px"
        />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit" :loading="posting"
            >确 定</el-button
          >
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";

defineOptions({
  name: "EAMMAINTAINPLANBUILD",
  inheritAttrs: false,
});

const emit = defineEmits(["update:visible", "echo-info"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
});

const { visible, id } = toRefs(props);

const value1 = ref("");

/** 弹窗展开 初始化数据 */
watch(
  () => props.visible,
  async (newVal: boolean) => {
    console.log("props.visible", props.visible);
    if (newVal) {
      value1.value = "";
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  emit("update:visible", false);
}

/** 确定提交 */
const posting = ref(false);
async function handleSubmit() {
  if (!value1.value) {
    ElMessage.error("请选择维护计划日期");
  } else {
    posting.value = true;
    request({
      url: `/eam/equMaintainPlan/buildOrder`,
      method: "post",
      data: { planId: id.value, planWorkTime: value1.value },
    })
      .then((data: any) => {
        if (data.code === 200) {
          ElMessage.success("提交成功");
          emit("update:visible", false);
          emit("echo-info");
        }
        posting.value = false;
      })
      .catch((res) => {
        posting.value = false;
      });
  }
}

// 组件销毁时调用
onBeforeUnmount(() => {
  emit("update:visible", false);
  closeDialog();
});
</script>

<style lang="scss" scoped>
:deep(.maxhDialog .el-dialog__body) {
  max-height: 70vh;
  overflow-y: auto;
  padding: 20px;
}
</style>
